<template>
  <div class="roominfo" @click="goInfo(id, title, price, img, des)">
    <div class="info_top">
      <img :src="img" alt="" />
    </div>
    <div class="info_dowm">{{ title }}</div>
  </div>
</template>

<script>
export default {
  props: {
    item:{
      type:Object,
      require:false
    },
    title: {
      type: String,
      require: false,
    },
    img: {
      type: String,
      require: false,
    },
    des: {
      type: String,
      require: false,
    },
    price: {
      type: String,
      require: false,
    },
    id: {
      type: Number,
      require: false,
    },
  },
  // created(){
  //   console.log(this.item)
  // },
  data() {
    return {};
  },
  methods: {
    goInfo(id, title, price, img, des) {
      this.$router.push({
        path: `/index/detail/${id}`,
        name: 'detail',
        params: { id: id, title: title, price: price, img: img, des: des },
      });
      // console.log(id);
    },
  },
};
</script>

<style scoped>
.roominfo {
  width: 300px;
  height: 400px;
  margin: 0 calc(25px);
}
.info_top {
  width: 300px;
  height: 300px;
}
img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
.info_dowm {
  font-size: 20px;
  text-align: center;
}
</style>
